<template>
  <view class="student">
    <view class="student-pannel">
      <view class="student-item">
        <text class="student-item-label">家长姓名</text>
        <view class="student-item-content">
          <input
            class="student-item-content-input"
            v-model="studentInfo.parentName"
            placeholder="请输入"
            style="padding: 0 12rpx"
          />
        </view>
      </view>
      <view class="student-item">
        <text class="student-item-label">家长手机号</text>
        <view class="student-item-content">
          <input
            class="student-item-content-input"
            v-model="studentInfo.parentPhone"
            placeholder="请输入"
            style="padding: 0 12rpx"
          />
        </view>
      </view>
      <view class="student-item">
        <text class="student-item-label">学生姓名</text>
        <view class="student-item-content">
          <input
            class="student-item-content-input"
            v-model="studentInfo.studentName"
            placeholder="请输入"
            style="padding: 0 12rpx"
          />
        </view>
      </view>
      <view class="student-item" @click="selectSchoolClick">
        <label class="student-item-label">学校</label>
        <view class="student-item-content">
          <label class="student-item-content-text" v-if="studentInfo.schoolName">{{
            studentInfo.schoolName
          }}</label>
          <label class="student-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
      <view class="student-item" @click="selectGradeClick">
        <label class="student-item-label">年级</label>
        <view class="student-item-content">
          <label class="student-item-content-text" v-if="studentInfo.gradeName">{{
            studentInfo.gradeName
          }}</label>
          <label class="student-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
      <view class="student-item" @click="selectClassClick">
        <label class="student-item-label">班级</label>
        <view class="student-item-content">
          <label class="student-item-content-text" v-if="studentInfo.className">{{
            studentInfo.className
          }}</label>
          <label class="student-item-content-hint" v-else>请选择</label>
        </view>
        <uni-icons color="#828B94" size="14" type="forward"></uni-icons>
      </view>
    </view>
    <view class="student-save">
      <view class="student-save-btn" @click="saveClick">保存</view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';

  import { getStudentInfo, saveStudentInfo } from '@/api/org.js';

  import { goBack, showToast, toPage } from '@/utils/app';

  import { useUserInfoStore } from '@/stores/user';
  const userInfoStore = useUserInfoStore();

  const id = ref();
  onLoad((option) => {
    id.value = option.id;

    uni.setNavigationBarTitle({
      title: id.value ? '编辑学生信息' : '添加学生信息',
    });
  });

  const bindListener = () => {
    uni.$on('__selectSchool__', function (data) {
      studentInfo.value.schoolId = data.id;
      studentInfo.value.schoolName = data.schoolName;
    });
    uni.$on('__selectGrade__', function (data) {
      studentInfo.value.gradeId = data.id;
      studentInfo.value.gradeName = data.gradeName;
    });
    uni.$on('__selectClasses__', function (data) {
      studentInfo.value.classId = data.id;
      studentInfo.value.className = data.className;
    });
  };

  onMounted(() => {
    bindListener();
    getStudentInfoReq();
  });

  const studentInfo = ref({
    id: '',
    userId: userInfoStore.userId,
    parentName: '',
    parentPhone: userInfoStore.phone,
    studentName: '',
    schoolId: '',
    schoolName: '',
    gradeId: '',
    gradeName: '',
    classId: '',
    className: '',
  });
  const getStudentInfoReq = async () => {
    if (id.value) {
      const res = await getStudentInfo(id.value);
      studentInfo.value = res.data || {};
    } else {
      studentInfo.value = { parentPhone: userInfoStore.phone };
    }
  };

  const selectSchoolClick = () => {
    toPage('/pages/user/select-school');
  };

  const selectGradeClick = () => {
    toPage('/pages/user/select-grade');
  };

  const selectClassClick = () => {
    if(!studentInfo.value.schoolId) {
      return showToast('请选择学校')
    }
    if(!studentInfo.value.gradeId) {
      return showToast('请选择年级')
    }
    toPage('/pages/user/select-class?schoolId=' + studentInfo.value.schoolId + '&gradeId=' + studentInfo.value.gradeId);
  };

  const saveClick = async () => {
    if (!studentInfo.value.parentName) {
      return showToast('家长姓名不能为空');
    }
    if (!studentInfo.value.parentPhone) {
      return showToast('家长手机号不能为空');
    }
    if (!studentInfo.value.studentName) {
      return showToast('学生姓名不能为空');
    }
    if (!studentInfo.value.schoolId) {
      return showToast('学校不能为空');
    }
    if (!studentInfo.value.gradeId) {
      return showToast('年级不能为空');
    }
    if (!studentInfo.value.classId) {
      return showToast('班级不能为空');
    }
    studentInfo.value.userId = userInfoStore.userId;
    const res = await saveStudentInfo(studentInfo.value);
    if (res.code === 200) {
      uni.$emit('__studentRefresh__');
      showToast('保存成功');
      goBack();
    } else {
    }
  };

  onUnmounted(() => {
    uni.$off('__selectSchool__');
    uni.$off('__selectGrade__');
    uni.$off('__selectClasses__');
  });
</script>

<style scoped lang="scss">
  .student {
    display: flex;
    flex-direction: column;

    .student-pannel {
      display: flex;
      flex-direction: column;
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 0rpx 24rpx;
      border-radius: 16rpx;
      background: #ffffff;

      .student-item {
        padding: 32rpx 0rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #efeff4;

        .student-item-label {
          width: 162rpx;
          color: #1f242e;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
        }

        .student-item-content {
          flex: 1;
          display: flex;
          align-items: center;

          .student-item-content-input {
            color: #1f242e;
            font-family: PingFang SC;
            font-size: 28rpx;
          }

          .student-item-content-text {
            color: #1f242e;
            font-family: PingFang SC;
            font-size: 28rpx;
          }

          .student-item-content-hint {
            color: #828b94;
            font-family: PingFang SC;
            font-size: 28rpx;
          }
        }
      }

      .student-item:last-child {
        border-bottom: none;
      }
    }

    .student-save {
      display: flex;
      justify-content: center;
      margin-top: 96rpx;

      .student-save-btn {
        width: 654rpx;
        height: 88rpx;
        border-radius: 24rpx;
        background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
      }
    }
  }
</style>
